<template>
	<view class="content cl">
		<div class="article-title cl">
			{{article.title}}
		</div>
		<div class="article-title2 cl">
			<span>{{article.cat_name}}</span>
			<span>{{article.create_time}}</span>
			<span style="font-size: 24rpx;margin-top: 6rpx;"></span>
		</div>
		<div class="article-content" v-if="article.catid == 56">
			<video :src="article.video_src" style="width: 100%;"></video>
		</div>
		<view class="article-content" v-else>
			<rich-text :nodes="article.details" style="width: 100%;"></rich-text>
		</view>
	</view>
</template>

<script>
	import common_config from '../../static/js/common.js';
	var config = common_config.config;
	var that;	
	var userInfo;
	import graceRichText from '../../components/richText.js';
	export default {
		data() {
			return {
				title:'',
				news_id:0,
				article:{},
			}
		},
		onLoad(options) {
			that = this;
			if(options.title){
				that.title = options.title;
				uni.setNavigationBarTitle({
					title:that.title
				});
			}
			//that.news_id = options.id;
			that.load_article();
		},
		methods: {
			load_article(){
				uni.request({
				  url: config.request_url+'/v2/open/worksheet/getFilterRows',
				  method: 'POST',
				  header: { 'Content-Type': 'application/json' },
				  data: {
				    "appKey": config.appKey,
				    "sign": config.sign,
				    "worksheetId": "ycgz",
					"pageSize": 50,
					"pageIndex": 1,
					"filters": [
						{
							"controlId": "gzmc",
							"dataType": 33,
							"spliceType": 1,
							"filterType": 2,
							"value": that.title// 根据点的不同按钮来传值  计费规则 / 安全行驶 / 用车规则
						}
					]
				  },
				  success: (res) => {
				    res = res.data;
				    if(res.success){
				    var datas = res.data.rows;
					//datas[0].neirong = (datas[0].neirong).replace('');
					datas[0].neirong = datas[0].neirong.replace(/<figure[^>]*>/gi, '<div>');
					datas[0].neirong = datas[0].neirong.replace(/<\/figure>/gi, '</div>');
					datas[0].neirong = (datas[0].neirong).replace(/<img(.*?)>/gi, function(match, group1){
					  if (group1.indexOf('style=') !== -1) {
					    return `<img${group1.replace(/style="(.*?)"/gi, 'style="$1;max-width:100%;height:auto;display:block;"')}>`;
					  } else {
					    return `<img${group1} style="max-width:100%;height:auto;display:block;">`;
					  }
					});
						if(datas.length > 0){
							console.log(datas[0]);
							that.article = {
								title:datas[0].gzmc,
								cat_name:'使用手册',
								details:datas[0].neirong,
								create_time:datas[0].ctime
							};
							console.log(that.article);
						}
				    }else{
				      uni.showToast({ title: res.data?.msg || '数据获取失败', icon: 'none' });
				    }
				  },
				  fail: (err) => {
				    console.error('请求失败:', err);
				    uni.showToast({ title: '网络错误', icon: 'none' });
				  }
				})  
			},
			//发送给好友
			onShareAppMessage(res) {
			  return {
				 title: that.article.title,
			      success(res){
			          uni.showToast({
			              title:'分享成功'
			          })
			      },
			      fail(res){
			          uni.showToast({
			              title:'分享失败',
			              icon:'none'
			          })
			      }
			  }
			},
			//分享到朋友圈
			onShareTimeline(res) {
			  return {
				  title: that.article.title,
			      success(res){
			          uni.showToast({
			              title:'分享成功'
			          })
			      },
			      fail(res){
			          uni.showToast({
			              title:'分享失败',
			              icon:'none'
			          })
			      }
			  }
			},
			back_home(){
				uni.switchTab({
					url:'/pages/index/index'
				});
			},
			param_to_url(url){
				uni.navigateTo({
					url:url
				})
			},
			to_baoming(){
				that.param_to_url('/'+that.article.baoming_url);
			},
			saveImage(file_src) {
				uni.downloadFile({
				  url: file_src, // 文件的远程地址
				  success: function (res) {
				    if (res.statusCode === 200) {
				      const filePath = res.tempFilePath; // 获取临时文件路径
				      uni.openDocument({
						showMenu: true, // 设置为true以显示右上角菜单
				        filePath: filePath, // 文件路径
				        //fileType: 'doc', // 文件类型，支持 doc、docx、xls、xlsx、ppt、pptx、pdf 等
				        success: function (res) {
				          console.log('打开文档成功');
				        },
				        fail: function (err) {
				          console.log('打开文档失败', err);
				        }
				      });
				    } else {
				      console.log('下载文件失败', res);
				    }
				  },
				  fail: function (err) {
				    console.log('下载文件失败', err);
				  }
				});
			},
		}
	}
</script>

<style>

page{user-select: text;}
.article-title{font-weight: bold;}
.article-title2{margin-top: 30rpx;}
.article-title2 span{float: left;margin-left: 10rpx;font-size: 28rpx;color: #999;margin-top: 5rpx;}
.article-title2 span:nth-child(1){font-size: 24rpx;color: #019934;border: 1px solid #019934;padding: 6rpx 10rpx;border-radius: 6rpx;float: left;margin-left: 0px;margin-top: 0px;}
.article-content{margin-top: 30rpx;width: 100%;}
.article-content image,.article-content img{width: 100% !important;}
.back-home{position: fixed;right: 3%;bottom: 20vh;background-color: #019934;color: #fff;width: 120rpx;height:120rpx;text-align: center;border-radius: 100%;font-size: 28rpx;}
.back-home p{margin-top: 15rpx;}
.back-home p:last-child{margin-top: 10rpx;}
.back-home2{bottom: 30vh;}


.news-list2{margin-top: 210rpx;width: 94%;background-color: #fff;padding: 0px 3%;}
.news-list2 li{height: auto;overflow: hidden;width:100%;padding:20rpx 0px;margin-top: 20rpx;border-bottom:  1px solid #f3f3f3;}
.news-list2 li:last-child{border-bottom: 0px;}
.news-list2 li .cover-round{width: 100%;overflow: hidden;}
.news-list2 li .cover-round2{width: 100%;height: 330rpx;}
.news-list2 li image{width: 100%;height: 100%; object-fit: cover;}
.news-list2 li .news-right{padding-bottom: 20rpx;width: 99%;padding: 0px 2%;}
.news-list2 li .news-right p:nth-child(1){display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;text-overflow: ellipsis;margin-top: 10rpx;}
.news-list2 li .news-right p:nth-child(2){display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 4;overflow: hidden;text-overflow: ellipsis;color: #999;margin-top: 10rpx;}
.bottom-fujian{width: 100%;margin-top: 20rpx;}
.bottom-fujian li{float: left;margin-left: 20rpx;padding: 20rpx 0px;width: 30%;text-align: center;color: #019934;}
.bottom-fujian li:nth-child(1){margin-left: 0px;}
.content{padding: 20rpx 3%;}
.article-content img{width: 100%;}
</style>
